<template>
    <!--components/popup/index.wxml-->

    <view class="popup_mask" v-if="selfShow" @click="close">
        <view class="ui-mask-wrapper" @click.stop="">
            <view class="container">
                <view class="header">
                    {{qrCodeObj.title}}
                </view>
                <view class="job">
                    {{qrCodeObj.content}}
                </view>
                <view class="name">
                    {{qrCodeObj.introduce}}
                </view>
                
                <image class="qrCode" :src="qrCodeObj.qrCode" mode=""></image>
                <view class="text">
                    邀请客户扫码查看详情
                </view>
            </view>
            <image v-if="closeable" class="close_icon" src="../../static/image/home_pop_close.png" @click="close">
            </image>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                selfShow: false,
            };
        },

        components: {},
        props: {
            qrCodeObj:{
                type: Object,
                default:{
                   name:"",
                   qrCode:"",
                   job:""
                }
            },
            
            name:{
                type: String,
                default: "",
            },  
            qrCodeUrl: {
                type: String,
                default: "",
            },
            value: {
                type: Boolean
            },
            closeable: {
                type: Boolean,
                default: true,
            }
        },
        watch: {
            value: {
                handler: function observer(val) {
                    var that = this;
                    console.log("popupCard")
                    that.selfShow = val
                },
                immediate: true
            }
        },

        methods: {
            close(e) {
                this.$emit('close');
                this.$emit('input', false)
              this.selfShow = false
            },
        }
    };
</script>
<style lang="scss">
    /* components/popup/index.wxss */
    .popup_mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* justify-content: center; */
    }

    .ui-mask-wrapper {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
    }


    .container {
        width: 580rpx;
        height: 700rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        background-size: 100% 230rpx;
        background-repeat: no-repeat;
        background-image: url(../../static/image/home_pop_bg.jpg);
        display: flex;
        flex-direction: column;
        align-items: center;
        .header{
            margin-top: 48rpx;
            height: 30rpx;
            font-size: 30rpx;
            line-height: 30rpx;
            color: #ffffff;
        }
        .job{
            margin-top: 20rpx;
            height: 30rpx;
            font-size: 30rpx;
            line-height: 30rpx;
            color: #ffffff;

        }
        .name{
            margin-top: 39rpx;
            height: 36rpx;
            font-size: 36rpx;
            font-weight: bold;
            font-stretch: normal;
            line-height: 24rpx;
            letter-spacing: 0rpx;
            color: #ffffff;
        }
        .qrCode{
            width: 340rpx;
            height: 340rpx;
            margin-top: 55rpx;
        }
        .text{
            font-size: 30rpx;
            line-height: 30rpx;
            color: #999999;
            margin-top: 29rpx;
        }
        
        
    }


    .popup_mask .close_icon {
        width: 70rpx;
        height: 70rpx;
        margin-top: 40rpx;
    }


    .popupContainer {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .img {
            margin-top: 98rpx;
            width: 154rpx;
            height: 154rpx;
        }

        .title {
            font-size: 36rpx;
            font-weight: normal;
            font-stretch: normal;
            line-height: 36rpx;
            letter-spacing: 0rpx;
            color: #7d4228;
            margin-top: 53rpx;
        }

        .content {
            font-size: 30rpx;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30rpx;
            letter-spacing: 0rpx;
            color: #ff7021;
            margin-top: 25rpx;
        }

 
    }
</style>
